import React, { useCallback } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import MarkdownPreview from '@uiw/react-markdown-preview';
import { useLocalStore } from 'hooks';
import { observer } from 'mobx-react-lite';
import RepositoryStore from 'store/RepositoryStore';

import { ArrowLeftIcon, EyeIcon, ForkIcon, LinkIcon, StarIcon } from 'components/icons';
import Text from 'components/Text';
import { TEXT_VIEW } from 'components/Text/Text.types';
import { classnames } from 'utils';

import Contributors from './components/Contributors';
import Languages from './components/Languages';
import RepoContent from './components/RepoContent';

import classes from './RepositoryPage.module.scss';

const cnRepositoryPage = classnames(classes, 'repository-page');

const RepositoryPage: React.FC = () => {
    const navigate = useNavigate();
    const { owner: ownerParam, repository: repoParam } = useParams();

    const { contributors, languages, readme, repository } = useLocalStore(
        () => new RepositoryStore(ownerParam, repoParam),
    );

    const handleBackClick = useCallback(() => navigate('/', { replace: true }), []);

    return (
        <div className={cnRepositoryPage()}>
            <div className={cnRepositoryPage('header')} onClick={handleBackClick}>
                <ArrowLeftIcon className={cnRepositoryPage('arrowLeft')} />
                <img
                    alt="avatar"
                    src={repository?.owner.avatarUrl ?? ''}
                    width={40}
                    height={40}
                    className={cnRepositoryPage('avatar')}
                />
                <Text view={TEXT_VIEW.title}>{repository?.name}</Text>
            </div>
            <div className={cnRepositoryPage('body')}>
                {repository?.homepage && (
                    <Link
                        to={repository.homepage}
                        className={cnRepositoryPage('repoLink')}
                        style={{ textDecoration: 'none' }}
                    >
                        <LinkIcon color="primary" width={16} height={14} />
                        <Text view={TEXT_VIEW.p16} className={cnRepositoryPage('link')}>
                            {repository.homepage.match(/(?:https:\/\/)(.+)/)?.[1]}
                        </Text>
                    </Link>
                )}
                {!!repository?.topics.length && (
                    <div className={cnRepositoryPage('topics')}>
                        {repository.topics.map((topic, index) => (
                            <div key={`${topic}_${index}`} className={cnRepositoryPage('topic')}>
                                {topic}
                            </div>
                        ))}
                    </div>
                )}
                <div className={cnRepositoryPage('about')}>
                    <Link to={`${repository?.htmlUrl}/stargazers`} className={cnRepositoryPage('info')}>
                        <StarIcon width={16} height={16} />
                        <Text view={TEXT_VIEW.p14} className={cnRepositoryPage('info-count')}>
                            {repository?.stargazersCount}
                        </Text>
                        <Text view={TEXT_VIEW.p14}>stars</Text>
                    </Link>
                    <Link to={`${repository?.htmlUrl}/watchers`} className={cnRepositoryPage('info')}>
                        <EyeIcon width={14} height={10} style={{ margin: '3px 1px' }} />
                        <Text view={TEXT_VIEW.p14} className={cnRepositoryPage('info-count')}>
                            {repository?.watchersCount}
                        </Text>
                        <Text view={TEXT_VIEW.p14}>watching</Text>
                    </Link>
                    <Link to={`${repository?.htmlUrl}/forks`} className={cnRepositoryPage('info')}>
                        <ForkIcon width={16} height={16} />
                        <Text view={TEXT_VIEW.p14} className={cnRepositoryPage('info-count')}>
                            {repository?.forksCount}
                        </Text>
                        <Text view={TEXT_VIEW.p14}>forks</Text>
                    </Link>
                </div>
                {repository && (
                    <div className={cnRepositoryPage('contributorsAndLanguage')}>
                        <Contributors
                            ownerLogin={repository?.owner.login}
                            repoName={repository?.name}
                            contributors={contributors}
                        />
                        <Languages languages={languages} />
                    </div>
                )}
            </div>
            <div className={cnRepositoryPage('content')}>
                {ownerParam && repoParam && <RepoContent owner={ownerParam} repo={repoParam} />}
            </div>
            {readme?.content && (
                <div className={cnRepositoryPage('readme')}>
                    <div className={cnRepositoryPage('readme-name')}>{readme?.name}</div>
                    <div className={cnRepositoryPage('readme-content')}>
                        <MarkdownPreview
                            source={readme.content}
                            wrapperElement={{
                                'data-color-mode': 'light',
                            }}
                            rehypeRewrite={(node) => {
                                if (
                                    node.type === 'element' &&
                                    node.tagName === 'a' &&
                                    node.properties &&
                                    node.properties['class'] === 'anchor'
                                ) {
                                    node.properties['class'] = cnRepositoryPage('readme-anchor');
                                }
                            }}
                        />
                    </div>
                </div>
            )}
        </div>
    );
};

export default observer(RepositoryPage);
